<template>
	<view class="publish-select-page">
		<view class="header">
			<text class="title">选择发布类型</text>
			<text class="subtitle">选择您要发布的内容类型</text>
		</view>

		<view class="options-container">
			<view 
				class="option-card" 
				v-for="option in publishOptions" 
				:key="option.id"
				:style="{ borderColor: option.color }"
				@click="handleSelect(option)"
			>
				<view class="icon-wrapper" :style="{ background: option.color }">
					<up-icon :name="option.icon" size="40" color="#fff" />
				</view>
				
				<view class="option-info">
					<text class="option-name" :style="{ color: option.color }">{{ option.name }}</text>
					<text class="option-desc">{{ option.desc }}</text>
				</view>

				<up-icon name="arrow-right" size="18" color="#999" />
			</view>
		</view>

		<view class="cancel-btn" @click="handleCancel">
			<text>取消</text>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const publishOptions = ref([
	{
		id: 1,
		name: '发布讨论',
		desc: '分享观点，参与讨论',
		icon: 'chat',
		color: '#1890ff',
		path: '/pages/post/publish?plateId=1'
	},
	{
		id: 2,
		name: '发布分享',
		desc: '分享资料、好物、美图',
		icon: 'share-square',
		color: '#52c41a',
		path: '/pages/post/publish?plateId=2'
	},
	{
		id: 3,
		name: '发布商品',
		desc: '出售闲置物品',
		icon: 'shopping-cart',
		color: '#fa8c16',
		path: '/pages/post/tradePublish'
	},
	{
		id: 4,
		name: '发布求助',
		desc: '寻求帮助与支持',
		icon: 'question-circle-fill',
		color: '#722ed1',
		path: '/pages/post/helpPublish'
	}
]);

const handleSelect = (option) => {
	// 检查登录状态
	const token = uni.getStorageSync('token');
	if (!token) {
		uni.showToast({
			title: '请先登录',
			icon: 'none'
		});
		setTimeout(() => {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		}, 1000);
		return;
	}

	uni.navigateTo({
		url: option.path
	});
};

const handleCancel = () => {
	uni.navigateBack();
};
</script>

<style lang="scss" scoped>
@import '../../styles/variables.scss';
@import '../../styles/mixins.scss';

.publish-select-page {
	min-height: 100vh;
	@include gradient-bg(135deg, #667EEA, #764BA2);
	padding: 100rpx $spacing-xxl $spacing-xl;
	box-sizing: border-box;

	.header {
		text-align: center;
		margin-bottom: 120rpx;
		@include fade-in;

		.title {
			display: block;
			font-size: $font-title;
			font-weight: $font-bold;
			color: #fff;
			margin-bottom: $spacing-base;
			text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
		}

		.subtitle {
			display: block;
			font-size: $font-base;
			color: rgba(255, 255, 255, 0.85);
		}
	}

	.options-container {
		.option-card {
			display: flex;
			align-items: center;
			padding: $spacing-xl $spacing-lg;
			@include glass;
			border-radius: $radius-xl;
			margin-bottom: $spacing-lg;
			border-left: 6rpx solid;
			box-shadow: $shadow-lg;
			transition: all $transition-base;
			border: 2rpx solid rgba(255, 255, 255, 0.2);
			@include slide-up;

			&:active {
				transform: scale(0.97);
				box-shadow: $shadow-base;
			}

			.icon-wrapper {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				@include flex-center;
				margin-right: $spacing-lg;
				box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
			}

			.option-info {
				flex: 1;

				.option-name {
					display: block;
					font-size: $font-lg;
					font-weight: $font-bold;
					margin-bottom: $spacing-xs;
				}

				.option-desc {
					display: block;
					font-size: $font-sm;
					color: $text-secondary;
				}
			}
		}
	}

	.cancel-btn {
		margin-top: 100rpx;
		padding: $spacing-xl;
		@include glass;
		border-radius: $radius-xl;
		text-align: center;
		border: 2rpx solid rgba(255, 255, 255, 0.3);
		transition: all $transition-base;

		text {
			font-size: $font-lg;
			color: #fff;
			font-weight: $font-semibold;
		}

		&:active {
			background: rgba(255, 255, 255, 0.4);
			transform: scale(0.98);
		}
	}
}
</style>

